<!DOCTYPE html>
<html class="light" lang="zh-CN"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NexusGo</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#1997f0",
                        "background-light": "#ffffff",
                        "background-dark": "#101b22",
                    },
                    fontFamily: {
                        display: ["Inter"],
                    },
                    borderRadius: { DEFAULT: "0.25rem", lg: "0.5rem", xl: "0.75rem", full: "9999px" },
                },
            },
        };
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
        }
        .group:hover .group-hover-item {
            opacity: 1;
        }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-[#111518]">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-[#e0e0e0] px-10 py-3">
<div class="flex items-center gap-4">
<div class="size-6 text-[#111518]">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-[#111518] text-lg font-bold leading-tight tracking-[-0.015em]">NexusGo</h2>
</div>
<div class="flex flex-1 justify-center">
<nav class="flex items-center gap-9">
<a class="text-[#111518] text-sm font-medium leading-normal" href="#">首页</a>
<a class="text-[#111518] text-sm font-medium leading-normal" href="#">行程规划</a>
<a class="text-[#111518] text-sm font-medium leading-normal" href="#">个人中心</a>
</nav>
</div>
<div class="flex items-center justify-end gap-4">
<button class="relative rounded-full p-2 hover:bg-[#f5f5f5]">
<span class="material-symbols-outlined text-[#111518]">chat_bubble</span>
<span class="absolute top-1.5 right-1.5 flex h-2 w-2">
<span class="relative inline-flex rounded-full h-2 w-2 bg-black"></span>
</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="User avatar image" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDCy9aUGjIK6h_PWwhyR4h9MF1JffdyhymOKOKZwM6i08Png9uOTtgBTI9w7SekAl-aDL-OG72CYa7WMzMe6MMAm8dylRabOaXjRzmCu6iVoAhvM4-DZyEWh7R3W27KipvOMkJlMToqg3SvnQcfVa0QHPn7_D22lsyil8uMaZUVRc9OKvtn0UR6wp2E7Nofj4WkBt8UvK-zaVqaObILq17XVNiiYZlq73JFj7O-eo7L4o2y3d72Yl322BxXRnpDk1Bq7PqqBHTODw");'></div>
</div>
</header>
<main class="flex-grow w-full flex items-center justify-center p-6 lg:p-10">
<div class="text-center">
<h1 class="text-4xl font-bold">首页内容</h1>
<p class="mt-4 text-lg">点击右上角的消息图标查看弹窗</p>
</div>
</main>
<div class="absolute inset-0 bg-black/10 flex justify-end items-start pt-16 pr-10">
<div class="w-full max-w-[800px] bg-white rounded-lg shadow-2xl border border-[#e0e0e0] flex flex-col h-[600px]">
<div class="grid grid-cols-2 gap-px bg-[#e0e0e0] border-b border-[#e0e0e0]">
<a class="flex items-center justify-center gap-2 p-3 bg-white hover:bg-[#f5f5f5]" href="#">
<div class="relative">
<span class="material-symbols-outlined text-xl">favorite</span>
<span class="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-black text-white text-[8px] font-bold">2</span>
</div>
<p class="text-sm font-medium">收到的赞</p>
</a>
<a class="flex items-center justify-center gap-2 p-3 bg-white hover:bg-[#f5f5f5]" href="#">
<div class="relative">
<span class="material-symbols-outlined text-xl">chat_bubble</span>
<span class="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-black text-white text-[8px] font-bold">1</span>
</div>
<p class="text-sm font-medium">收到的评论</p>
</a>
</div>
<div class="flex flex-1 min-h-0">
<div class="w-1/3 border-r border-[#e0e0e0] flex flex-col">
<div class="p-4 border-b border-[#e0e0e0]">
<h3 class="text-base font-bold text-black">好友列表</h3>
</div>
<div class="flex-1 overflow-y-auto">
<a class="flex items-center gap-3 p-3 bg-[#f5f5f5]" href="#">
<div class="relative flex-shrink-0">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCUK-QHCuDtY94LQgh1zoILvVx7IRBR1RZVuJXJX92DGmdmwzAOkygEXZvdlbpMEM1zIFiv4KlkqVT2eESIi6wG--HTKWUC-xSLehaZUeJj4KhK0xyXGYMQStbAsbJGCk4e-CxcXXZTCah1jHD6jBLu1ocvBQhYovm7B7rioKss9yWYH6vQM-zUaHmE7AyB0l9HwWy6ZAGuGBwqIp1G0upOCpLXJKRZCsx6IcFcrETOEx5VCOhljBkSf6URSW-gdicabwO-_DapEg");'></div>
</div>
<p class="text-sm font-bold text-black truncate">张三</p>
</a>
<a class="flex items-center gap-3 p-3 hover:bg-[#f5f5f5]" href="#">
<div class="relative flex-shrink-0">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCLqwMEvTukqYldYa5YBxIId0Ox1FBo5sgLfQCzqPqxQLsfcEuWdu8hCLquvAVHmxcDRDaVzS7dYmud-5yNHbYbOhSRw8P7tYYz-HApg_NNjo77-hIpWIRWJFwVdbFnTrdcxIj--TykdQKGODZD8vIv1CCzLru_jJlI6KtouJ6pJWMCFDrsM_izkEormFljRTB0epc9KSh4rKiEPqZ_-Z6HlNOM8J0q02A8Jg8LvsBTQXaBcU7Ae3tALkmq9FZdPxUB4_AGMhs7jw");'></div>
</div>
<p class="text-sm font-medium text-black truncate">李四</p>
</a>
<a class="flex items-center gap-3 p-3 hover:bg-[#f5f5f5]" href="#">
<div class="relative flex-shrink-0">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDKzaMo9INRgEJeeZk9jaxYPmsd4GcoJ3_WkEbqSEjANMOTiexH6whxrViHyDjb7vfLALOvfNR0e4GYA7LiQBFG6rkI3oFp6NFZbTaa8NaXDnFkb3roM_srQ88Mu8P0TUf33vS4_CYUXok4C2F7-3VFNVvte1fZ881e2OPF2LUyvzWSo07W3m6Q4ulQHFcTDBLfHKY0RRmxN_XEbaQcoHemn-DN5kCUxyoI4Rtpg-etXUMa318AsaICd27078wAml6pqogG5wOjHg");'></div>
</div>
<p class="text-sm font-medium text-black truncate">王五</p>
</a>
</div>
</div>
<div class="w-2/3 flex flex-col">
<div class="p-4 border-b border-[#e0e0e0] flex items-center justify-between">
<h3 class="text-base font-bold text-black">张三</h3>
</div>
<div class="flex-1 p-4 overflow-y-auto space-y-4">
<div class="flex items-start gap-3">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 flex-shrink-0" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCUK-QHCuDtY94LQgh1zoILvVx7IRBR1RZVuJXJX92DGmdmwzAOkygEXZvdlbpMEM1zIFiv4KlkqVT2eESIi6wG--HTKWUC-xSLehaZUeJj4KhK0xyXGYMQStbAsbJGCk4e-CxcXXZTCah1jHD6jBLu1ocvBQhYovm7B7rioKss9yWYH6vQM-zUaHmE7AyB0l9HwWy6ZAGuGBwqIp1G0upOCpLXJKRZCsx6IcFcrETOEx5VCOhljBkSf6URSW-gdicabwO-_DapEg");'></div>
<div class="flex flex-col items-start gap-1">
<div class="bg-[#f5f5f5] p-3 rounded-lg rounded-tl-none">
<p class="text-sm">在吗？下周去上海的行程你规划的怎么样了？</p>
</div>
<span class="text-xs text-[#666]">5分钟前</span>
</div>
</div>
<div class="flex items-start gap-3 justify-end">
<div class="flex flex-col items-end gap-1">
<div class="bg-black text-white p-3 rounded-lg rounded-br-none">
<p class="text-sm">在的，已经规划的差不多了，稍后发给你看下。</p>
</div>
<span class="text-xs text-[#666]">4分钟前</span>
</div>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 flex-shrink-0" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDCy9aUGjIK6h_PWwhyR4h9MF1JffdyhymOKOKZwM6i08Png9uOTtgBTI9w7SekAl-aDL-OG72CYa7WMzMe6MMAm8dylRabOaXjRzmCu6iVoAhvM4-DZyEWh7R3W27KipvOMkJlMToqg3SvnQcfVa0QHPn7_D22lsyil8uMaZUVRc9OKvtn0UR6wp2E7Nofj4WkBt8UvK-zaVqaObILq17XVNiiYZlq73JFj7O-eo7L4o2y3d72Yl322BxXRnpDk1Bq7PqqBHTODw");'></div>
</div>
<div class="flex items-start gap-3">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 flex-shrink-0" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCUK-QHCuDtY94LQgh1zoILvVx7IRBR1RZVuJXJX92DGmdmwzAOkygEXZvdlbpMEM1zIFiv4KlkqVT2eESIi6wG--HTKWUC-xSLehaZUeJj4KhK0xyXGYMQStbAsbJGCk4e-CxcXXZTCah1jHD6jBLu1ocvBQhYovm7B7rioKss9yWYH6vQM-zUaHmE7AyB0l9HwWy6ZAGuGBwqIp1G0upOCpLXJKRZCsx6IcFcrETOEx5VCOhljBkSf6URSW-gdicabwO-_DapEg");'></div>
<div class="flex flex-col items-start gap-1">
<div class="bg-[#f5f5f5] p-3 rounded-lg rounded-tl-none">
<p class="text-sm">太棒了！这个攻略对我很有帮助，感谢分享！</p>
</div>
<span class="text-xs text-[#666]">2分钟前</span>
</div>
</div>
</div>
<div class="p-4 border-t border-[#e0e0e0]">
<div class="relative">
<input class="w-full pl-4 pr-10 py-2 border border-[#e0e0e0] rounded-full focus:outline-none focus:ring-2 focus:ring-black/20" placeholder="输入消息..." type="text"/>
<button class="absolute inset-y-0 right-0 flex items-center pr-3">
<span class="material-symbols-outlined text-black/80">send</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</body></html>